<template>
  <div class="app">
    <!-- 头部 -->
    <myHeader style="height: 8vh;border-radius: 2px;"></myHeader>

    <el-container 
      style="height: 91vh; 
      border: 1px solid #eee; 
      margin: 0;
      border: 0;
      padding: 0;">     <!-- style： 隐藏滚动条  去掉白边-->
      <!-- 侧边栏 -->
      <el-aside style="width: 11%;height: auto;border-radius: 2px;"  v-show="showSidebar">
        <asideNav></asideNav>
      </el-aside>
      <!-- 主页面 -->
      <el-main class="mainPage">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import myHeader from "@/page/myHeader"
import asideNav from '@/page/asideNav'
export default {
  name: 'App',
  components: {
    asideNav,
    myHeader
  },
  data() {
    return {
      count: true,
      showSidebar: true
    };
  },
  watch: {
    '$route'(to, from) {
    if (to.path === '/DataSets' && from.path === '/login') {
      // this.count = false
      // console.log(this.count)
      window.location.reload();
    }
      this.showSidebar = !['/login', '/register'].includes(this.$route.path);
    }
  },
  setup() {
    const debounce = (callback, delay) => {
      let tid;
      return function (...args) {
        const ctx = this;
        clearTimeout(tid);
        tid = setTimeout(() => {
          callback.apply(ctx, args);
        }, delay);
      };
    };
    const _ = window.ResizeObserver;
    window.ResizeObserver = class ResizeObserver extends _ {
      constructor(callback) {
        callback = debounce(callback, 20);
        super(callback);
      }
    };
  },
}
</script>

<style>
#app {
  /* background-image: url("./assets/背景.png");  */
  background-size: cover;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2980b9;
  height: 100%;
}

  html,
  body{
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
  }
  .mainPage{
    background-color: #f5f5f5;
    overflow: auto;
  }
</style>
